<template>
  <view class="collect">
    <action-bar :options="navOptions"></action-bar>
    <view class="collect-box">
      <!-- 提示 -->
      <view class="collect-box-tip">
        <view class="collect-box-tip-img">
          <image :src="baseImgUrl+'/manage/tips.png'"
                 mode=""></image>
        </view>
        <view class="collect-box-tip-span">提示</view>
      </view>

      <!-- 提示语 -->
      <view class="collect-box-prompt">
        <view class="collect-box-prompt-span">
          开始执业需要进行人像采集核实和当前地理位置信息。
        </view>
        <view class="collect-box-prompt-span">
          （请确保手机打开GPS功能）
        </view>
      </view>

      <!-- 按钮 -->
      <view class="collect-box-btn">
        <view class="btn"
              @click="navTo('fileUrls')">
          采集人像
        </view>
      </view>
    </view>

    <!--定位弹窗提示-->
    <uni-popup ref="alertDialog"
               type="dialog">
      <uni-popup-dialog type="warn"
                        cancelText="取消"
                        confirmText="确定"
                        title="提示"
                        content="是否将当前位置作为项目地址？如当前不在项目地址现场，请勿确认，否则将导致下次执业无法进行！"
                        @confirm="dialogConfirm"
                        @close="dialogClose">
      </uni-popup-dialog>
    </uni-popup>
    <toast></toast>
  </view>
</template>

<script>
import { baseImgUrl } from '@/config.js';
export default {
  data () {
    return {
      baseImgUrl: baseImgUrl,
      navOptions: {
        statusBar: 'dark',
        left: {
          icon: 'back'
        },
        center: {
          title: '采集数据'
        },
      },
      type: 'center',
      lonLat: '', // 项目经纬度
      staffId: '', // 执业人员
      projectId: '', // 项目id
      nowLonLat: '', // 当前经纬度
      ProjectLeader: false, // 用于判断是从开始执业到采集人像还是从项目一级菜单到采集人像步骤
      loading: false,
    }
  },
  onLoad (options) {
    this.staffId = options.staffId || ''
    this.ProjectLeader = options.ProjectLeader || false
    // 获取执业人员id
    if (this.$store.state.unitTask.staffId) {
      this.staffId = this.$store.state.unitTask.staffId
    }
    // 获取项目id
    if (this.$store.state.unitTask.projectId) {
      this.projectId = this.$store.state.unitTask.projectId
    }
    // 获取项目经纬度
    if (this.$store.state.unitTask.lonLat) {
      this.lonLat = this.$store.state.unitTask.lonLat
    }
  },
  onShow () {
    // 获取图片路径
    if (this.$store.state.unitTask.fileUrls) {
      this.fileUrls = this.$store.state.unitTask.fileUrls
      // 调用人脸比对接口
      this.checkPeople();
    }
  },
  methods: {
    // 人脸比对
    checkPeople () {
      // 人脸识别所需参数(固定写法)
      let data = {
        filePath: this.fileUrls,
        staffId: this.staffId
      }
      this.$store.dispatch('checkFace', data).then(res => {
        if (res && res.code === 200) {
          // 识别成功
          if (res.data == 1) {
            this.navToForm()
          } else if (res.data == 3) {
            // 弹出错误信息
            this.$showToast({
              show: true,
              text: '识别人脸失败'
            })
          } else if (res.data == 4) {
            // 弹出错误信息
            this.$showToast({
              show: true,
              text: '活体检测失败'
            })
          }
          else {
            // 弹出错误信息
            this.$showToast({
              show: true,
              text: '不是本人，无法开始作业'
            })
          }
        } else {
          this.$showToast({
            show: true,
            text: `识别人脸失败,状态码为${res.code}`
          })
        }
      }).finally(() => {
        // 清空图片
        this.$store.state.unitTask.fileUrls = ''
      })
    },
    // 弹窗确认
    dialogConfirm () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      let data = {
        projectId: this.projectId,
        lonLat: this.longitude + ',' + this.latitude
      }
      // 调用项目更新接口更新项目经纬度
      this.$store.dispatch('updateLonLat', data).then(res => {
        if (res && res.code === 200) {
          // 跳转至表单页面
          this.navToForm()
        }
      }).finally(() => {
        let timer = setTimeout(() => {
          this.loading = false
          uni.hideLoading();
          clearTimeout(timer)
        }, 3000);
      })

    },
    // 弹窗关闭
    dialogClose () {
      this.navToForm()
    },
    // 跳转至拍照页面
    navTo (fileUrls) {
      uni.navigateTo({
        url: '../../pages_workTableChild/manage/recognition?photoType=true&showReco=true&label=' + fileUrls
      })
    },
    // 跳转至采集页面
    navToForm () {
      let that = this
      if (this.ProjectLeader) {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            let longitudeAndLatitude = res.latitude + "," + res.longitude || null;
            let data = {
              projectId: that.$store.state.unitTask.projectId,
              staffId: that.$store.state.unitTask.projectHead,
              taskId: that.$store.state.unitTask.taskId,
              executeCoordinate: longitudeAndLatitude,
              staffFace: that.fileUrls,

            }
            that.$store.dispatch('taskExcuteRecordList', data).then(res => {
              uni.redirectTo({
                url: '../../pages_workTableChild/manage/PracticeContent'
              })
            })
          },
        });
        // uni.redirectTo({
        //   url: '../../pages_workTableChild/manage/PracticeContent'
        // })
      } else {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            let longitudeAndLatitude = res.latitude + "," + res.longitude || null;
            let data = {
              projectId: that.$store.state.unitTask.projectId,
              staffId: that.$store.state.unitTask.projectHead,
              taskId: that.$store.state.unitTask.taskId,
              executeCoordinate: longitudeAndLatitude,
              staffFace: that.fileUrls,
              remarks: '项目负责人打卡'
            }
            this.$store.dispatch('taskExcuteRecordList', data).then(res => {
              uni.redirectTo({
                url: '../../pages_workTableChild/manage/CategoryGrade'
              })
            })
          },
        });
      }
    }
  }
}
</script>

<style lang="less" scoped>
.collect {
  background: #ffffff;

  &-box {
    width: 100%;
    min-height: calc(100vh - 80rpx);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 108rpx;

    &-tip {
      display: flex;
      justify-content: flex-start;

      &-img {
        width: 31rpx;
        height: 31rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      &-span {
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-left: 15rpx;
      }
    }

    &-prompt {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      margin-top: 46rpx;

      &-span {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        margin-bottom: 10rpx;
      }
    }

    &-btn {
      width: 100%;
      height: 80rpx;

      .btn {
        width: 702rpx;
        height: 80rpx;
        margin: 100rpx auto 0;
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        background: #335ac6;
        text-align: center;
        line-height: 80rpx;
        border-radius: 5rpx;
      }
    }
  }
}
/deep/.uni-popup-dialog {
  overflow: hidden;
}
/deep/.uni-border-left {
  background-color: #335ac6;
}
/deep/.uni-button-color {
  color: #ffffff;
}
</style>
